<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="deacription" content="">
        <link rel="stylesheet" href="./">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            <p>姓：<input type="text" v-model="xName"></p>
            <p>名：<input type="text" v-model="mName"></p>
            <p>姓名：{{fullName}}</p>
            <p>姓名：<input v-model="fullName" type="text"></p>
        </div>
       <script src="../js/vue.js"></script>
       <script>
            const vm = new Vue({
                // vue中会进行数据代理，会将data methods computer中的数据全都挂载this上，可以通过this直接使用
                data:{
                    xName:"",
                    mName:"",
                },
                methods:{},
                watch:{},
                // 计算属性，是个属性，使用时不用加括号
                // 内部依赖的数据发生变化才会重新计算
                computed:{
                    // 只读,不能更新
                    /* fullName(){
                        return this.xName + " " + this.mName;
                    }, */
                    fullName:{
                        // 计算属性读取方法
                        get(){
                            return this.xName + " " + this.mName;
                        },
                        // 写入，val就是可获取的值
                        set(val){
                            const [ xName,mName ] = val.split(" ");
                            this.xName = xName;
                            this.mName = mName;
                        },
                    },
                }
            });
            vm.$mount("#app");
       </script>
    </body>
</html>